<template>
  <div class="fillcontain">
    <div
      class="filter-container"
      style="padding: 0"
    >
      <div class="calendar-list-container">
        <div class="tag-list-container">
          <div class="container-header">
            <span>每日推荐</span>
          </div>
          <div class="container-content">
            <div class="tag-list">
              <Draggable
                class="tag-listwrap"
                v-model="todaylist.hot_topics"
                @start="drag=true"
                @sort="sortTopics(todaylist.hot_topics,'hot')"
              >
                <div
                  class="list-item"
                  v-for="element in todaylist.hot_topics"
                  :key="element.id"
                  @dblclick="editTopic(element,'edit')"
                  title="鼠标拖拽排序，双击可编辑"
                  :style='{backgroundImage:"url("+imgHost+element.picture+")"}'
                ><span class="tag-name">{{element.title}}</span>
                  <i
                    class="el-icon-close"
                    @click="deleteTag(todaylist.hot_topics,element.topic_id,'hot')"
                  ></i>
                </div>
              </Draggable>
              <el-button
                type="primary"
                @click="onAddHotTopic()"
              >添加话题</el-button>
            </div>
          </div>
        </div>
        <p class="addGategory">
          <el-button
            type="primary"
            @click="showAddCateModal(todaylist.id)"
          >添加话题分类</el-button>
          <el-button
            type="primary"
            @click="onAddTopicModal()"
          >添加话题</el-button>
        </p>

        <Draggable
          v-model="categoryArray"
          @start="drag=true"
          @end="sortCategories"
        >
          <div
            class="tag-list-container"
            v-for="(item,index) in categoryArray"
            :key="index"
          >
            <div class="container-header">
              <input
                v-model="item.category.name"
                class="cate-name"
                @change="editCategoryName(item.category.category_id,$event)"
              />
              <span class="oper-buttons">
                <el-button @click="deleteTopicCate(item.category.category_id)">移除</el-button>
              </span>
            </div>
            <div class="container-content">
              <div class="tag-list">
                <Draggable
                  class="tag-listwrap"
                  v-model="item.topics"
                  @start="drag=true"
                  @sort="sortTopics(item.topics)"
                >
                  <div
                    class="list-item"
                    v-for="element in item.topics"
                    :key="element.topic_id"
                    @dblclick="editTopic(element,'edit')"
                    title="鼠标拖拽排序，双击可编辑"
                    :style='{backgroundImage:"url("+imgHost+element.picture+")"}'
                  ><span class="tag-name">{{element.title}}</span>
                    <i
                      class="el-icon-close"
                      @click="deleteTag(item.topics,element.topic_id)"
                    ></i>
                  </div>
                </Draggable>
              </div>
            </div>
          </div>
        </Draggable>
        <add-topic-modal
          v-on:reload="getTopicCategory"
          :topic-object="currentTopic"
        ></add-topic-modal>
        <add-category-modal v-on:reload="getTopicCategory"></add-category-modal>
        <modal-add-hot-topic
          :visible="modalAddHotTopicVisible"
          :added-topics="todaylist.hot_topics"
          @handleClose="closeAddHotTopicModal"
          @reloadHotTopic="getHotTopics"
        ></modal-add-hot-topic>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { parseTime } from "@/filters/index";
import Draggable from "vuedraggable";
import AddTopicModal from "./components/AddTopicModal";
import AddCategoryModal from "./components/AddCategoryModal";
import ModalAddHotTopic from "./components/ModalAddHotTopic";

export default {
  name: "topic",
  components: { Draggable, AddTopicModal, AddCategoryModal, ModalAddHotTopic },

  data() {
    return {
      categoryArray: [],
      modalAddHotTopicVisible: false,
      currentTopic: {},
      dialogFormVisible: false
    };
  },
  computed: {
    ...mapState({
      todaylist: store => store.topicMangeStore.hotTopicCategories
    })
  },
  created() {
    this.getHotTopics();
    this.getTopicCategory();
  },
  methods: {
    //获取今日推荐
    getHotTopics() {
      this.$get("trend/hot_topic").then(resp => {
        if (resp.data && resp.data.recommend_topics && resp.data.recommend_topics.length) {
          this.setHotTopicCategories(resp.data);
        }
      });
    },
    //获取话题分类
    getTopicCategory() {
      this.$get("trend/topic").then(resp => {
        if (resp.data && resp.data.length) {
          this.categoryArray = resp.data;
          this.setTopicCategories(resp.data);
        }
      });
    },
    //删除话题
    deleteTag(arr, id, type) {
      this.$confirm("确定要删除该话题吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = type == "hot" ? "trend/hot_topic" : "trend/topic";
        this.$del(url, { topic_id: id })
          .then(resp => {
            if (resp.message == "OK") {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              arr.forEach((item, index) => {
                if (item.topic_id == id) {
                  arr.splice(index, 1);
                }
              });
              this.getHotTopics();
            }
          })
          .catch(err => {
            this.handleError(err);
          });
      });
    },
    //删除分类
    deleteTopicCate(category_id) {
      this.$confirm("确定要删除该分类吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$del("trend/category", { category_id: category_id })
          .then(resp => {
            if (resp) {
              this.categoryArray.forEach((item, index) => {
                if (item.category.category_id == category_id) {
                  this.categoryArray.splice(index, 1);
                }
              });
              this.toastSuccess(resp);
              this.getHotTopics();
            }
          })
          .catch(err => {
            this.handleError(err);
          });
      });
    },
    //显示添加今日推荐话题对话框
    onAddHotTopic() {
      this.modalAddHotTopicVisible = true;
    },
    closeAddHotTopicModal() {
      this.modalAddHotTopicVisible = false;
    },
    //添加话题
    onAddTopicModal() {
      this.currentTopic = {};
      this.showAddTopicModal();
    },
    //编辑话题
    editTopic(topic, type) {
      this.currentTopic = Object.assign({}, topic);
      this.showAddTopicModal({
        topic,
        type: type
      });
    },
    //提交编辑话题分类
    editCategoryName(category_id, evt) {
      let value = evt.target.value;
      this.$put("trend/category", {
        category_id: category_id,
        name: value
      }).then(resp => {
        this.toastSuccess(resp);
      });
    },
    //拖拽排序话题
    sortTopics(items, type) {
      let arr = [];
      let url = type === "hot" ? "trend/hot_topic" : "trend/topic/sort";
      items.forEach((item, index) => {
        arr.push({
          topic_id: item.topic_id,
          priority: index
        });
      });
      this.$put(url, { topics: arr })
        .then(resp => {})
        .catch(err => {
          this.handleError(err);
        });
    },
    //拖拽排序话题分类
    sortCategories() {
      let categories = [];
      this.categoryArray.forEach((item, index) => {
        item.category.priority = index;
        categories.push(item.category);
      });
      this.$put("trend/category/sort", { categories: categories })
        .then(resp => {})
        .catch(err => {
          this.handleError(err);
        });
    },
    toastSuccess(resp) {
      if (resp.message == "OK") {
        this.$message({
          type: "success",
          message: "修改成功!"
        });
      }
    },
    handleError(err) {
      this.$message({
        type: "error",
        message: "操作失败!"
      });
    },
    ...mapMutations(["showAddTopicModal", "showAddCateModal"]),
    ...mapActions(["setHotTopicCategories", "setTopicCategories"])
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.tag-list-container .container-header .el-button {
  padding: 5px 15px;
  margin: 0;
}
.topic-modal input {
  width: 400px;
}
.addGategory {
  text-align: right;
  padding-right: 20px;
}
.topic-modal {
  .avatar-uploader .el-upload {
    width: 100px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100%;
    display: block;
  }
}
.tag-list-container {
  margin: 15px 20px;
  border: 1px solid #d2d2d2;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  .container-header {
    padding: 10px 20px;
    border-bottom: 1px solid #d2d2d2;
    background: #f7f7f7;
    overflow: hidden;
    cursor: move;
    .oper-buttons {
      float: right;
    }
    .cate-name {
      padding: 3px 5px;
      border: 1px solid transparent;
      background: none;
      &:focus {
        border: 1px solid #ccc;
      }
    }
  }
  .container-content {
    padding: 10px 20px;
  }
  .tag-listwrap {
    display: inline-block;
  }
  .tag-list .list-item {
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    height: 70px;
    margin: 0 10px 10px 0;
    border: 1px solid #ccc;
    list-style: none;
    background: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    cursor: move;
    .tag-name {
      line-height: 70px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      text-shadow: 2px 2px 5px #000;
    }
    .el-icon-close {
      position: absolute;
      top: -8px;
      right: -8px;
      padding: 3px;
      background: #ccc;
      border-radius: 50%;
      cursor: pointer;
      font-size: 12px;
    }
  }
}
</style>
